<template>
  <div class="table-page">
    <el-card>
      <div class="toolbar">
        <el-input
          v-model="searchUsername"
          placeholder="用户名"
          style="width: 200px; margin-right: 10px"
        />
        <el-input
          v-model="searchPhone"
          placeholder="手机号"
          style="width: 200px; margin-right: 10px"
        />
        <el-button type="primary" @click="filter">查询</el-button>
      </div>
      <el-table :data="filterTableData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="avatar" label="用户头像">
          <template #default="{ row }">
            <el-avatar :src="`${url}${row.userImage}`" />
          </template>
        </el-table-column>
        <el-table-column prop="用户状态" label="用户状态">
          <template #default="{ row }">
            <el-tag v-if="row.isDisable === 0" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="success" @click="handleDisableSuccess(row)"
              >启用</el-button
            >
            <el-button type="danger" @click="handleDisable(row)"
              >禁用</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 50, 100]"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from "vue";
import { disableUser, getAllUserInfo } from "../../api/admin/index";
import { records } from "../../types/admin";
import { ElMessage } from "element-plus";
//存储获取到的所有用户信息
const tableData = ref<records>([]);
const total = ref(2);
const currentPage = ref(1);
const pageSize = ref(10);
//接口url
const url = "http://192.168.31.196:8081/preview/";

const searchUsername = ref("");
const searchPhone = ref("");
//存储过滤之后的数据
const filterTableData = ref<records>([]);

//获取用户信息
const fetchUsers = async () => {
  const res = await getAllUserInfo({
    page: currentPage.value,
    size: pageSize.value,
  });
  console.log("获取用户信息", res.data.records);
  tableData.value = res.data.records;
  filter();
};

//分页页码变化回调函数
const handlePageChange = (page: number) => {
  currentPage.value = page;
  fetchUsers();
};

//分页条数回调函数
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  currentPage.value = 1;
  fetchUsers();
};
//启用用户回调函数
const handleDisableSuccess = async (row: any) => {
  console.log(row);
  const res = await disableUser(row.id, 0);
  if (res.code === 1) {
    ElMessage.success("启用用用户成功");
    //再次获取用户信息
    fetchUsers();
  } else {
    ElMessage.error("启用用用户成功");
  }
  console.log("启用用用户成功", res);
};
//禁用用户回调函数
const handleDisable = async (row: any) => {
  console.log(row);
  const res = await disableUser(row.id, 1);
  if (res.code === 1) {
    ElMessage.success("禁用用户成功");
    //再次获取用户信息
    fetchUsers();
  } else {
    ElMessage.error("禁用用户失败");
  }
  console.log("禁用用户", res);
};
//过滤回调函数
const filter = () => {
  if (searchPhone.value || searchUsername.value) {
    filterTableData.value = tableData.value.filter((item) => {
      return (
        item.username.includes(searchUsername.value) &&
        item.phone.includes(searchPhone.value)
      );
    });
  } else {
    filterTableData.value = tableData.value;
  }
  console.log("过滤之后的数据", filterTableData.value);
};
onMounted(() => {
  fetchUsers();
});
</script>

<style scoped lang='scss'>
.table-page {
  padding: 20px;
  background: #f5f6fa;
  min-height: 100vh;
}
.toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>